<script lang="ts" setup>
import ChartCard from './c-cpns/chart-card/chart-card.vue'
import CountCard from './c-cpns/count-card/count-card.vue'
import useAnalysisStore from '@/store/main/analysis/analysis'
import { storeToRefs } from 'pinia'
import {
  PieEchart,
  LineEchart,
  RoseEchart,
  BarEchart,
  MapEchart
} from '@/components/page-echarts/index'
import { onMounted, computed, ref } from 'vue'
//数据请求
const analysisStore = useAnalysisStore()
// analysisStore.fetchAnalysisDataAction()
const loading = ref(true) // 新增加载状态

onMounted(async () => {
  try {
    await analysisStore.fetchAnalysisDataAction() // 等待数据加载
  } finally {
    loading.value = false // 无论成功/失败都更新状态
  }
})
//拿数据
//
const {
  amountList,
  goodsCategoryCount,
  goodsCategorySale,
  goodsCategoryFavor,
  goodsAddressSale
} = storeToRefs(analysisStore)

//数据转化
const showGoodsCategoryCount = computed(() => {
  return goodsCategoryCount.value.map((item) => ({
    name: item.name,
    value: item.goodsCount
  }))
})
const showGoodsCategorySale = computed(() => {
  return goodsCategorySale.value.map((item) => ({
    name: item.name,
    value: item.goodsCount
  }))
})
const showGoodsCategorySale1 = computed(() => {
  const labels = goodsCategorySale.value.map((item) => item.name)
  const values = goodsCategorySale.value.map((item) => item.goodsCount)
  return { labels, values }
})
const showGoodsCategoryFavor = computed(() => {
  const labels = goodsCategoryFavor.value.map((item) => item.name)
  const values = goodsCategoryFavor.value.map((item) => item.goodsFavor)
  return { labels, values }
})
const showGoodsAddressSale = computed(() => {
  return goodsAddressSale.value.map((item) => ({
    name: item.address,
    value: item.count
  }))
})
</script>

<template>
  <div class="dashboard">
    <!--顶部数据展示 -->
    <el-row :gutter="20">
      <template v-for="item in amountList" :key="item.amount">
        <el-col :span="6" :xs="12">
          <!--xs是响应式布局，页面缩小到规定尺寸之后，改变布局，意思是span=6/xs:12,两个占一行-->
          <count-card v-bind="item"></count-card>
        </el-col>
      </template>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <chart-card>
          <pie-echart
            v-if="!loading && showGoodsCategoryCount.length"
            :pie-data="showGoodsCategoryCount"
          />
        </chart-card>
      </el-col>
      <el-col :span="8">
        <chart-card>
          <map-echart
            v-if="!loading && showGoodsAddressSale.length"
            :map-data="showGoodsAddressSale"
          ></map-echart>
        </chart-card>
      </el-col>
      <el-col :span="8">
        <chart-card>
          <rose-echart
            v-if="!loading && showGoodsCategorySale.length"
            :rose-data="showGoodsCategorySale"
          ></rose-echart>
        </chart-card>
      </el-col>
    </el-row>
    <!--底部区域图表-->
    <el-row :gutter="10">
      <el-col :span="12">
        <chart-card>
          <line-echart
            v-if="!loading && showGoodsCategorySale1.labels.length"
            :labels="showGoodsCategorySale1.labels"
            :values="showGoodsCategorySale1.values"
          ></line-echart>
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card>
          <bar-echart
            v-if="!loading && showGoodsCategoryFavor.labels.length"
            :labels="showGoodsCategoryFavor.labels"
            :values="showGoodsCategoryFavor.values"
          ></bar-echart>
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
}
.echart {
  height: 400px;
}
</style>
